<template>
  <div>
    <template v-if="item.plan_type == 'task'">
      <div class="todo-list" @click.stop="toDetail(item)">
        <div class="todo-list-dec nowrap">[任务]&nbsp; {{item.title || '(无主题)'}}</div>
        <div>{{item.start_time}}</div>
      </div>
    </template>
    <template v-else>
      <a-popover
        placement="rightTop"
        trigger="click"
        @click.stop="getDetail(item.id)"
        :getPopupContainer="getPopupContainer"
      >
        <template #title>
          <div>
            <a-row justify="end" style="margin-bottom: 5px">
              <a-tooltip>
                <template #title>编辑日程</template>
                <EditOutlined
                  style="font-size: 16px; cursor: pointer"
                  @click.stop="AddSchedule(item.id)"
                  class="edit-delete-icon"
                />
              </a-tooltip>
              <a-tooltip>
                <template #title>删除日程</template>
                <a-popconfirm
                  title="确定删除该日程（包含所有重复日程）吗?"
                  ok-text="确定"
                  cancel-text="取消"
                  @confirm="deleteSchedule(item.id)"
                >
                  <DeleteOutlined
                    @click.stop
                    style="font-size: 16px; margin-left: 10px"
                    class="edit-delete-icon"
                  />
                </a-popconfirm>
              </a-tooltip>
            </a-row>
            <div
              style="margin-top: 10px; font-size: 16px"
              class="pop-fields-row"
            >
              {{ currentDetail.title || "( 无主题 )" }}
            </div>
            <div
              v-if="
                                currentDetail.start_time &&
                                currentDetail.end_time
                              "
              class="pop-fields-row"
              style="font-size: 14px; margin-bottom: 0"
            >
                              <span>{{
                                  currentDetail.start_time +
                                  " - " +
                                  currentDetail.end_time
                                }}</span>
            </div>
          </div>
        </template>
        <template #content>
          <div
            v-if="currentDetail.notice_time_rule_txt"
            class="pop-fields-row text-grey"
          >
            <BellOutlined style="margin-right: 10px" />
            <span
            >{{
                currentDetail.notice_time_rule_txt
              }}通知</span
            >
          </div>
          <div
            v-if="
                              currentDetail.repeat_rule_txt &&
                              currentDetail.repeat_end_date
                            "
            class="pop-fields-row text-grey"
          >
            <RedoOutlined style="margin-right: 10px" />
            <span>{{ currentDetail.repeat_rule_txt }}</span>
            <span style="margin-left: 10px">截止到</span>
            <span>{{ currentDetail.repeat_end_date }}</span>
          </div>
          <div
            v-if="
                              currentDetail.userList &&
                              currentDetail.userList.length > 0
                            "
            class="pop-fields-row"
            style="margin-bottom: 10px"
          >
            <TeamOutlined
              style="color: #666; margin-right: 10px"
            />
            <a-tag
              color="blue"
              v-for="(item, index) in currentDetail.userList"
              :key="index"
            >{{ item.realname }}</a-tag
            >
          </div>
          <div v-if="currentDetail.content">
            <FileOutlined
              style="color: #666; margin-right: 10px"
            />
            <span style="font-size: 12px; color: #666">
                              {{ currentDetail.content }}
                            </span>
          </div>
        </template>
        <div class="todo-list">
          <div class="todo-list-dec nowrap">[日程]&nbsp; {{item.title || '(无主题)'}}</div>
          <div>{{moment(currentDate).format(
              "MM月-DD日"
          )}} {{`${item.start_time}-${item.end_time}`}}</div>
        </div>
      </a-popover>
    </template>

    <!--  任务详情  -->
    <IframeModal
      :visible="iframeVisible"
      title="任务详情"
      :url="iframeUrl"
      @cancel="iframeVisible = false"
    />
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
} from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  EditOutlined,
  DeleteOutlined,
  BellOutlined,
  RedoOutlined,
  TeamOutlined,
} from "@ant-design/icons-vue";
import {message} from "ant-design-vue";
import { TextTip } from "bl-common-vue3";
import IframeModal from "@/views/home/modules/IframeModal.vue";
import request from "@/common/utils/request";
import moment from "moment";
export default defineComponent({
  name: "ToDoListItem",
  components: {IframeModal, TextTip, EditOutlined, DeleteOutlined, BellOutlined, RedoOutlined, TeamOutlined},
  props: {
    item: {
      type: Object,
      default: () => ({}),
    },
    currentDate: {
      type: Date,
      default: () => moment(),
    }
  },
  setup(props, { emit }) {
    const state = reactive({
      currentDetail: {},
      iframeUrl: '',
      iframeVisible: false,
    });

    const getPopupContainer = (trigger) => {
      return trigger.parentNode;
    };

    // 获取日程详情
    const getDetail = (id) => {
      state.currentDetail = {};
      request.get("/work_task", "/plan/detail", { id: id }).then((res) => {
        const { detail } = res;

        // 主题
        state.currentDetail.title = detail.title;
        // 参与者
        state.currentDetail.userList = detail.do_user || [];
        //日程时间
        if (
          !detail.start_time &&
          !detail.end_time &&
          detail.start_date &&
          detail.end_date
        ) {
          state.currentDetail.start_time = detail.start_date;
          state.currentDetail.end_time = detail.end_date;
        }
        if (
          detail.start_time &&
          detail.end_time &&
          detail.start_date &&
          detail.end_date
        ) {
          state.currentDetail.start_time =
            detail.start_date + " " + detail.start_time;
          state.currentDetail.end_time =
            detail.end_date + " " + detail.end_time;
        }

        //提醒时间
        state.currentDetail.notice_time_rule_txt = detail.notice_time_rule_txt;

        // 重复频率
        state.currentDetail.repeat_rule_txt = detail.repeat_rule_txt;
        // 重复截止时间
        state.currentDetail.repeat_end_date = detail.repeat_end_date;

        //描述
        state.currentDetail.content = detail.content;
      });
    };

    const toDetail = (current) => {
      if (current.third_link_url && current.third_link_url.pc_link_url) {
        let link = current.third_link_url.pc_link_url;
        state.iframeUrl = `${link}${
          link.indexOf("?") === -1 ? "?" : "&"
        }org_token=${store.getters.token}`;
        state.iframeVisible = true;
      } else {
        window.microApp.forceDispatch({
          type: "SetChildDrawerList",
          info: {
            props: {
              title: "待办任务",
              maskCloseable: true,
              visible: true,
              closable: true,
              width: 1000,
              bodyStyle: {height: '100%', flex: 1},
              destroyOnClose: true,
            },
            microId: "org_workbench_taskTodo",
            heightFull: true,
            app: "workTask",
            url: '/task/home',
            params: {
              isMainDrawer: true,
            }
          },
        })
      }
    };

    const deleteSchedule = (id) => {
      request.del("/work_task", "/plan", { id: id }).then((res) => {
        message.success(res.msg || "刪除成功");
        emit('refresh');
      });
    };

    const AddSchedule = (id) => {
      emit('AddSchedule', id);
    };

    return {
      ...toRefs(state),
      moment,
      toDetail,
      getPopupContainer,
      getDetail,
      deleteSchedule,
      AddSchedule,
    };
  },
});
</script>



<style lang="less" scoped>
:deep(.ant-popover-title) {
  background-color: #1890ff;
  color: #fff;
  padding-top: 15px;
  padding-bottom: 15px;
  border-radius: 10px 10px 0 0;
  width: 300px;

  .edit-delete-icon {
    padding: 5px;
    border-radius: 6px;
    transition: 0.5s ease;
  }

  .edit-delete-icon:hover {
    background-color: rgba(38, 129, 243, 0.8);
  }
}

:deep(.ant-popover) {
  z-index: 998;
}
:deep(.ant-popover-inner) {
  border-radius: 10px;

  .pop-fields-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 13px;
  }

  .text-grey {
    color: #666;
  }
}

.calender-schedule-fields:hover {
  color: #1890ff;
}

.calender-schedule-fields {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 12px;
  cursor: pointer;

  .calender-schedule-fields-title {
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 5px;
  }
}
.calender-schedule-fields:last-child {
  margin-bottom: 10px;
}
.calender-schedule-tip {
  font-size: 12px;
  margin-left: 4px;
}

.calender-schedule-tip:hover {
  color: #1890ff;
}

.todo-list {
  height: 36px;
  display: flex;
  align-items: center;
  background: #f6f6f6;
  padding: 0 10px;
  cursor: pointer;
  .todo-list-dec {
    color: @primary-color;
    flex: 1;
    min-width: 0;
  }
}
</style>
